<template>
  <div class="select-group-wrapper">
    <div>
      <SelectItem v-model="type" />
    </div>

    <div class="btns">
      <el-button class="reset" icon="el-icon-refresh" plain @click="handleReset"
        >重置选项</el-button
      >
      <el-button class="bg-[#FFA800]" icon="el-icon-aim" @click="handleOk">智能选址</el-button>
    </div>

    <AnalysisProcess :visible.sync="visible" @end="handleAnalysisEnd" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import SelectItem from '@/components/index/aiSelect/SelectItem.vue'
import AnalysisProcess from '@/components/index/aiSelect/AnalysisProcess.vue'
import { MutationsType } from '@/actions/aiSelect'

const defaultFilters = {}
export default Vue.extend({
  components: { SelectItem, AnalysisProcess },
  data() {
    return {
      filterParams: {},
      visible: false,
      type: '',
    }
  },
  methods: {
    handleAnalysisEnd() {},
    hasFilters() {
      // return Object.keys(this.filterParams).some((k) => {
      //   return !!this.filterParams[k]
      // })
      return true
    },
    handleReset() {
      this.filterParams = { ...defaultFilters }
    },
    handleOk() {
      if (this.hasFilters()) {
        this.visible = true

        this.$store.commit(MutationsType.SET_SELECT_RESOURCE, {
          label: '写字楼',
          name: 'Building',
          compName: 'BuildingList',
          params: this.filterParams,
        })
      } else {
        this.$message({
          message: '请选择分析维度！',
          type: 'warning',
        })
      }
    },
  },
})
</script>
<style lang="scss" scoped>
.select-group-wrapper {
  position: relative;

  .btns {
    position: absolute;
    top: -92px;
    right: 0;
    display: flex;
    justify-content: flex-end;
  }

  ::v-deep.el-button {
    color: #fff;
    border-color: transparent;
  }

  .reset {
    color: #000 !important;
  }
}
</style>
